import React, {Component} from 'react';
import {Button, Form, Row, Col, DatePicker, Table, Pagination, Input, Select, Modal, Radio, Icon, Upload} from 'antd';
import moment from 'moment';
import {statistics, excel} from "../value";
import app from '../AppMethod';
import {config} from "../config";
import {Consumer} from "../store";

import plus from '../image/plus.png';
import minus from '../image/minus.png';
import {ConfirmAddPropertys} from '../components/EditComponent';
import {Editor} from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import {EditorState} from 'draft-js';
import '../css/goodAdd.css';

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const confirm = Modal.confirm;

class goodManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            propertyList: [
                {
                    propertyId: '001',
                    propertyName: '味道',
                    propertyValue: ['柠檬味', '苹果味', '橘子味']
                },
                {
                    propertyId: '002',
                    propertyName: '温度',
                    propertyValue: ['冰', '温', '凉']
                },
                {
                    propertyId: '003',
                    propertyName: '盐度',
                    propertyValue: ['咸', '微咸', '淡']
                },
            ],
            propertyListValueTable: [],
            currentPropertyValue: '',
            visible: false,
            editorState:EditorState.createEmpty(),
            isShow:1
        }
    };

    formItemLayout = {
        labelCol: {span: 7},
        wrapperCol: {span: 17},
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'}/>
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <Row style={{height: '100%'}}>
                <div className="goodAddHeader"></div>
                <Row className="goodAddInputContainer">
                    <Form className="login-form">
                        <Col span={18}>
                            <Row>
                                <Col span={8}>
                                    <FormItem label="商品名" {...this.formItemLayout} className="formItemStyle">
                                        {
                                            getFieldDecorator('logistics_goodName', {
                                                rules: [{required: true, message: '请输入商品名'}]
                                            })(
                                                <Input placeholder="请输入"/>
                                            )
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label="分类" {...this.formItemLayout} className="formItemStyle">
                                        {
                                            getFieldDecorator('logistics_goodType', {
                                                rules: [{required: true, message: '请选择分类'}]
                                            })(
                                                <Select placeholder="请选择分类">
                                                    <Option value="1">蛋糕</Option>
                                                    <Option value="2">小吃</Option>
                                                </Select>
                                            )
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label="原价" {...this.formItemLayout} className="formItemStyle">
                                        {
                                            getFieldDecorator('logistics_price', {
                                                rules: [{required: true, message: '请输入'}]
                                            })(
                                                <Input placeholder="请输入"/>
                                            )
                                        }
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row style={{marginTop: 10}}>
                                <Col span={8}>
                                    <FormItem label="销售价" {...this.formItemLayout} className="formItemStyle">
                                        {
                                            getFieldDecorator('logistics_shop_price', {
                                                rules: [{required: true, message: '请输入'}]
                                            })(
                                                <Input placeholder="请输入"/>
                                            )
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label="库存" {...this.formItemLayout} className="formItemStyle">
                                        {
                                            getFieldDecorator('logistics_goodStock', {
                                                rules: [{required: true, message: '请输入库存'}]
                                            })(
                                                <Input placeholder="请输入"/>
                                            )
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label="起售量" {...this.formItemLayout} className="formItemStyle">
                                        {
                                            getFieldDecorator('logistics_good_shop_num', {
                                                rules: [{required: true, message: '请选择分类'}]
                                            })(
                                                <Input placeholder="请输入"/>
                                            )
                                        }
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row style={{marginTop: 10}}>
                                <Col span={8}>
                                    <FormItem label="限购量" {...this.formItemLayout} className="formItemStyle">
                                        {
                                            getFieldDecorator('logistics_shop_limit', {
                                                rules: [{required: true, message: '请输入'}]
                                            })(
                                                <Input placeholder="请输入"/>
                                            )
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label="简介" {...this.formItemLayout} className="formItemStyle">
                                        {
                                            getFieldDecorator('logistics_good_introduce', {
                                                rules: [{required: true, message: '请输入库存'}]
                                            })(
                                                <Input placeholder="请输入"/>
                                            )
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label="关键词" {...this.formItemLayout} className="formItemStyle">
                                        {
                                            getFieldDecorator('logistics_good_keyWords', {
                                                rules: [{required: true, message: '请选择关键词'}]
                                            })(
                                                <Input placeholder="请输入"/>
                                            )
                                        }
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row style={{marginTop: 10}}>
                                <Col span={8}>
                                    <FormItem label="销售端" {...this.formItemLayout} className="formItemStyle">
                                        <RadioGroup onChange={this.handleSettingOnChange}
                                                    value={this.state.value} style={{paddingTop: 0}}>
                                            <Radio value={1}>所有</Radio>
                                            <Radio value={2}>外卖</Radio>
                                            <Radio value={3}>店内</Radio>
                                        </RadioGroup>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={6}>
                            <FormItem label="图片" {...this.formItemLayout} className="formItemStyle">
                                {
                                    getFieldDecorator('logistics_shop_price', {
                                        rules: [{required: true, message: '请输入'}]
                                    })(
                                        <Upload
                                            name="avatar"
                                            listType="picture-card"
                                            className="avatar-uploader UploadStyle"
                                            showUploadList={false}
                                            action="//jsonplaceholder.typicode.com/posts/"
                                            onChange={this.handleChange}
                                        >
                                            {uploadButton}
                                        </Upload>
                                    )
                                }
                            </FormItem>
                        </Col>
                    </Form>
                </Row>
                <Row style={{paddingRight: 20}}>
                    <Col span={7}>
                        <div className="goodAddPropertyAdd">
                            <span className="goodAddPropertyAddText">属性:</span>
                            <span><Input value={this.state.currentPropertyValue}
                                         onChange={this.handleAddProperty}/></span>
                            <span className="goodAddPropertyAddImg">
                                <Button type={'primary'} icon={'plus'} title="添加"
                                        ghost
                                        onClick={() => this.handleAddPropertyBtn()}>
                                </Button>
                            </span>
                        </div>
                        <div className="goodAddPropertyList">
                            {
                                this.state.propertyList.map((item, index) => {
                                    return (
                                        <div key={index} className="goodAddPropertyListItem">
                                            <span className="goodAddPropertyAddText">属性{index + 1}:</span>
                                            <span><Input value={item.propertyName} disabled/></span>
                                            <span className="goodAddPropertyMinusImg">
                                                <Button type={'danger'}
                                                        icon={'minus'} title="删除" ghost
                                                        onClick={() => this.handleDeleteProperty(index)}>
                                                </Button>
                                            </span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </Col>
                    <Col span={17}>
                        <div><ConfirmAddPropertys data={this.state.propertyList}
                                                  handleAddPropertyValue={(valueArr) => this.handleAddPropertyValue(valueArr)}/>
                        </div>
                        <div className="goodAddPropertyValueList">
                            <div className="goodAddPropertyValueListHeader">
                                {
                                    this.state.propertyList.map((item, index) => {
                                        return (
                                            <div key={index}
                                                 className="goodAddPropertyValueListHeaderItem">{item.propertyName}</div>
                                        )
                                    })
                                }
                                <div className="goodAddPropertyValueListHeaderItem">操作</div>
                            </div>
                            {
                                this.state.propertyListValueTable.map((item, index) => {
                                    return (
                                        <div key={index} className="goodAddPropertyValueListContainer">
                                            {
                                                item.map((item1, index1) => {
                                                    return (
                                                        <div key={index1} className="goodAddPropertyValueListItem">
                                                            {item1}
                                                        </div>
                                                    )
                                                })
                                            }
                                            <div className="goodAddPropertyValueListItem">
                                                <span style={{color: 'red', cursor: 'pointer'}} title="删除"
                                                      onClick={() => this.handleDeletePropertyValue(index)}>删除</span>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </Col>
                </Row>
                <Row className="goodAddDetailContainer">
                    <Col className="goodAddDetailContainerRadio">
                        <div>是否有详情页：</div>
                        <div>
                            <RadioGroup onChange={this.handleCloseDetailOnChange}
                                        value={this.state.isShow} style={{paddingTop: 0}}>
                                <Radio value={0}>关闭详情页</Radio>
                                <Radio value={1}>开启详情页</Radio>
                            </RadioGroup>
                        </div>
                    </Col>
                    <Col style={{paddingLeft:40,paddingRight:40,marginTop:20}} className={this.state.isShow==1?'':'hidden'}>
                        <Editor
                            editorState={this.state.editorState}
                            toolbarClassName="toolbarClassName"
                            wrapperClassName="wysiwyg-wrapper"
                            editorClassName="editorClassName"
                            localization={{ locale: 'zh' }}
                            onEditorStateChange={this.onEditorStateChange}
                        />
                    </Col>
                    <Col style={{marginTop:30}}>
                        <Button type={'primary'}>发布商品</Button>
                        <Button type={'default'} style={{marginLeft:15}}>保存草稿单</Button>
                    </Col>
                </Row>
            </Row>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({menuType: "订单数据统计"});
        let date_end = moment(new Date()).format('YYYY-MM-DD');
        let date_start = app.getBeforeDate(4);
        let data = {page: 1, size: 5, date_start: date_start, date_end: date_end};
        //this.handleGetOrderList(data);
        this.handleArrayPositonChange(this.state.propertyList);
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 处理添加属性输入框变化事件
     * @param e
     */
    handleAddProperty = (e) => {
        this.setState({currentPropertyValue: e.target.value});
    };

    /**
     * 添加属性
     */
    handleAddPropertyBtn() {
        let value = this.state.currentPropertyValue;
        if (!value) {
            app.alert('请输入属性', 'error', 2);
            return;
        }
        let property = {
            propertyId: '004',
            propertyName: value,
            propertyValue: []
        };
        let propertyList = this.state.propertyList;
        for (let i = 0; i < propertyList.length; i++) {
            propertyList[i].propertyValue = [];
        }
        propertyList.push(property);
        this.setState({propertyList: propertyList});
        console.log(propertyList);
        this.handleArrayPositonChange(propertyList);
    };

    /**
     * 处理删除属性事件
     * @param index
     */
    handleDeleteProperty(index) {
        let propertyList = this.state.propertyList;
        propertyList.splice(index, 1);
        this.setState({propertyList: propertyList});
        this.handleArrayPositonChange(propertyList);
    };

    /**
     * 处理数组元素位置转换
     */
    handleArrayPositonChange(propertyList) {
        let propertyListValueTable = [];
        for (let i = 0; i < propertyList.length; i++) {
            let propertyValue = propertyList[i].propertyValue;
            for (let j = 0; j < propertyValue.length; j++) {
                if (i === 0) {
                    let arrayItem = [];
                    arrayItem.push(propertyValue[j]);
                    propertyListValueTable.push(arrayItem);
                } else {
                    propertyListValueTable[j].push(propertyValue[j])
                }
            }
        }
        this.setState({propertyListValueTable: propertyListValueTable});
        console.log(propertyListValueTable);
    };

    /**
     * 处理删除属性值
     */
    handleDeletePropertyValue(index) {
        const _this = this;
        confirm({
            title: '',
            content: '您确认要删除该属性值吗？',
            onOk() {
                let propertyList = _this.state.propertyList;
                for (let i = 0; i < propertyList.length; i++) {
                    propertyList[i].propertyValue.splice(index, 1);
                }
                _this.setState({propertyList: propertyList});
                _this.handleArrayPositonChange(propertyList);
            },
            onCancel() {

            }
        });
    };

    /**
     * 处理添加属性值事件
     * @param valueArr
     */
    handleAddPropertyValue(valueArr) {
        let propertyList = this.state.propertyList;
        for (let i = 0; i < valueArr.length; i++) {
            propertyList[i].propertyValue.push(valueArr[i]);
        }
        this.setState({propertyList: propertyList});
        this.handleArrayPositonChange(propertyList);
    };

    /**
     * 处理富文本编辑器编辑事件
     * @param editorState
     */
    onEditorStateChange= (editorState) => {
        this.setState({
            editorState,
        });
    };

    /**
     * 处理富文本编辑器的隐藏显示
     * @param e
     */
    handleCloseDetailOnChange=(e)=>{
        this.setState({isShow:e.target.value});
    }
};

const GoodManages = Form.create()(goodManage);
export default prop => (
    <Consumer>
        {
            props => (
                <GoodManages {...prop} {...props}/>
            )
        }
    </Consumer>
);